<template>
  <div class="formroot">
    <client-only>
      <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px">
        <el-row :gutter="20">
          <el-col v-for="(field, index) in fields" :key="field.model" v-bind="getColSpan(field)">
            <el-form-item :label="field.label" :prop="field.model">
              <template v-if="field.type === 'select'">
                <el-select v-model="formData[field.model]" :placeholder="field.placeholder" :teleported="false"
                  popper-class="select-dropdown">
                  <el-option v-for="option in field.options" :key="option.value" :label="option.label"
                    :value="option.value" />
                </el-select>
              </template>
              <component v-else :is="fieldComponentMap[field.type] || 'el-input'" v-model="formData[field.model]"
                v-bind="field.props || {}" :type="field.type || null" :placeholder="field.placeholder" />
            </el-form-item>
          </el-col>
          <el-col :xs="24" :sm="24" :md="8" :lg="6">
            <div class="form-actions">
              <el-button type="primary" @click="handleSubmit">提交</el-button>
              <el-button @click="handleReset">重置</el-button>
            </div>
          </el-col>
        </el-row>
      </el-form>
    </client-only>
  </div>
</template>


<script setup>
//import { ElInput, ElSelect, ElOption, ElDatePicker, ElButton, ElCascader, ElTimePicker } from 'element-plus';
const props = defineProps({
  fields: {
    type: Array,
    required: true,
  },
});
// 响应式布局配置
const getColSpan = (field) => {
  return field.span || {
    xs: 24,
    sm: 12,
    md: 8,
    lg: 6
  }
}
const emit = defineEmits(['submit']);
const formData = ref({});
const formRules = ref({});
const formRef = ref(null);

// 使用 shallowRef 来存储组件映射
const fieldComponentMap = shallowRef({})

// 动态导入组件
onMounted(async () => {
  const { ElInput, ElSelect, ElOption, ElDatePicker, ElCascader, ElTimePicker } = await import('element-plus')

  fieldComponentMap.value = {
    input: ElInput,
    textarea: ElInput,
    select: ElSelect,
    option: ElOption,
    date: ElDatePicker,
    datetime: ElDatePicker,
    daterange: ElDatePicker,
    cascader: ElCascader,
    time: ElTimePicker,
  }

  // 初始化表单数据
  initFormData()
})
// 初始化表单数据
const initFormData = () => {
  props.fields.forEach((field) => {
    formData.value[field.model] = field.value ?? ''
    if (field.rules) {
      formRules.value[field.model] = field.rules
    }
  })
}
const handleSubmit = async () => {
  if (!formRef.value) return

  try {
    await formRef.value.validate()
    emit('submit', formData.value)
  } catch (error) {
    console.error('表单验证失败', error)
  }
}
const handleReset = () => {
  if (formRef.value) {
    formRef.value.resetFields()
  }
}
// 在组件挂载后初始化
onMounted(() => {
  initFormData()
})
</script>



<style lang="scss" scoped>
.formroot {
  width: 100%;

  .form-item {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
  }

  .form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    /* 当空间不够时自动换行 */
  }
}
</style>
